<template>
  <div class="container">
    <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="53px">
      <x-header class="my-header" >资讯</x-header>
      <div>
        <tab   active-color="white" style="background-color: rgb(255, 104, 140)" v-model="index">
          <tab-item class="vux-center" :selected="demo === item" v-for="(item, index) in list2" @click="demo = item" :key="index">{{item}}</tab-item>
        </tab>
        <infor_list></infor_list>

      </div>
      <!--<swiper v-model="index" class="swiper" :show-dots="false">-->
        <!--<swiper-item v-for="(item, index) in list2" :key="index">-->
          <!--<panel :header="$t('List of content with image')" :footer="footer" :list="list" type="1" @on-img-error="onImgError"></panel>-->
          <!--<div class="tab-swiper vux-center">{{item}} Container</div>-->
        <!--</swiper-item>-->
      <!--</swiper>-->
    </view-box>
  </div>
</template>

<script>
  import { XHeader,ViewBox,Tab, TabItem,Divider,SwiperItem,Swiper  } from 'vux'
  import infor_list from "@/components/others/infor_list"
  export default {
    data(){
      return {
        list2:['活动资讯','健康资讯'],
        index:0,
        demo:'活动资讯'
      }
    },
    components: {
      infor_list,
      XHeader,
      ViewBox,
      Tab,
      TabItem,
      Divider,
      SwiperItem,
      Swiper
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .my-header {
    background-color: rgb(255, 104, 140);
    position: fixed;
    height: 46px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
  }
  .swiper{
    height: 100%;
  }
</style>
